<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<script th:src="@{/static/js/jquery.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/static/js/afquery.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/static/layui/layui.all.js}" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/static/css/Common.css}" />
	</head>
	<body>
		<!-- 对话框面板定义 -->
		<div class='course_dlg_define' style='display:none;'>
			<div class='pane' style='padding:10px;overflow-y: scroll;'>
				<div style='padding:10px'>
					<span>选择教授的科目:</span>
					 <select class="academyID" >
						<option></option>
						<option th:each ="row : ${CourseList}" th:text="${row.courseName} + '['+${row.courseId}+']'" th:value="${row.id}"></option>
					 </select>
				</div>
			</div>
		</div>
		
		<!-- 对话框面板定义 -->
		<div class='clazz_course_dlg_define' style='display:none'>
			<div class='pane' style='padding:10px'>
				<div class="layui-form" >
					<table class="layui-table" lay-size="sm">
						<colgroup>
							<col>
							<col width="150">
						</colgroup>
						<thead>
							<tr>
								<th>课程</th>
								<th>教师</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="i:${#numbers.sequence(1, 15)}">
								<td>
									<select name="modules" lay-filter="test" lay-search>
									  <option value="">直接选择或搜索选择</option>
									  <option th:each ="row : ${CourseList}" th:text="${row.courseName} + '['+${row.courseId}+']'" th:value="${row.id}"></option>
									</select>
								</td>
								<td>
									<select class="teacher" lay-verify="" >
									</select>
								</td>
							</tr>
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
		
		<!-- 对话框面板定义 -->
		<div class='timetable_dlg_define' style='display:none'>
			<div class='pane' style='padding:10px'>
				<div class="layui-form" >
					<table class="layui-table" lay-size="sm">
						<colgroup>
							<col>
							<col width="150">
						</colgroup>
						<thead>
							<tr>
								<th>课程</th>
								<th>教师</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="i:${#numbers.sequence(1, 15)}">
								<td>
									<select class="course" name="modules" lay-filter="test" lay-search>
									  <option value="">直接选择或搜索选择</option>
									  <option th:each ="row : ${CourseList}" th:text="${row.courseName} + '['+${row.courseId}+']'" th:value="${row.id}"></option>
									</select>
								</td>
								<td>
									<select class="teacher" lay-verify="" >
									</select>
								</td>
							</tr>
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="layui-row" id="Main" style="height: 100%;overflow: hidden;">
			<!-- 顶部区 -->
			<div th:replace=" ~{A_Common::Top_Menu}"></div>

			<!-- 左侧菜单区 -->
			<div th:replace=" ~{A_Common::Left_Menu}"></div>

			<!-- 右侧内容区 -->
			<!-- =============================================课程管理================================================ -->

			<div th:fragment="Course_Manager" class="layui-col-xs8 layui-col-md10 layui-row" id="right_Content">
				<fieldset class="layui-elem-field site-demo-button" style="padding: 5%;">
					<legend>课程管理</legend>
					<div class="layui-tab">
						<ul class="layui-tab-title">
							<li onclick="M.tab(this)">新增课程</li>
							<li onclick="M.tab(this)">课程管理</li>
							<li onclick="M.tab(this)">教师任课管理</li>
							<li onclick="M.tab(this)">班级排课管理</li>
						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item">
								<div class="layui-form" action="">
									<div class="layui-form-item">
										<div class="layui-inline">
											<label class="layui-form-label">课程名称</label>
											<div class="layui-input-inline">
												<input type="text" placeholder="请输入课程名称" class="layui-input">
											</div>
										</div>
										<div class="layui-inline">
											<label class="layui-form-label">课程编号</label>
											<div class="layui-input-inline">
												<input type="text" class="layui-input" placeholder="请输入课程编号" >
											</div>
										</div>
									</div>
									<div class="layui-form-item">
										<div class="layui-input-block">
											<button class="layui-btn" onclick="M.saveCourse()">立即提交</button>
											<button type="reset" class="layui-btn layui-btn-primary">重置</button>
										</div>
									</div>
								</div>
							</div>
							<div class="layui-tab-item" id="courseTable">
								<table class="layui-table">
									<colgroup>
										<col>
									</colgroup>
									<thead>
										<tr>
											<th><input type="checkbox" onclick="M.SelectAll(this)" /></th>
											<th>序号</th>
											<th>问题</th>
											<th>课程编号</th>
										</tr>
									</thead>
									<tbody>
										<tr th:each="row : ${CourseList}">
											<td><input type="checkbox" name="selectID" /></td>
											<td th:idd="${row.id}" th:text="${rowStat.index}+1">1</td>
											<td th:text="${row.courseName}">阿里巴巴</td>
											<td th:text="${row.courseId}">阿里巴巴</td>
										</tr>
									</tbody>
								</table>
								<!-- 								<div class="nothing">
					  									没有查询到有用数据
					  								</div> -->
								<div class="layui-row">
									<div class="layui-btn-group layui-col-md-offset8">
										<button type="button" class="layui-btn" onclick="M.OpenUpdate(this)">编辑</button>
										<button type="button" class="layui-btn" onclick="M.DeleteModel(this)">删除</button>
										<button type="button" class="layui-btn" onclick="M.SaveUpdate(this)">保存</button>
									</div>
								</div>
							</div>
							<div class="layui-tab-item" id="TccTable">
								<table class="layui-table">
									<colgroup>
										<col>
									</colgroup>
									<thead>
										<tr>
											<th><input type="checkbox" onclick="M.SelectAll(this)" /></th>
											<th>序号</th>
											<th>教师</th>
											<th>工号</th>
											<th>课程名称</th>
											<th>课程编号</th>
										</tr>
									</thead>
									<tbody>
										<tr th:each="row : ${TeacherList}" style="background-color: #92B8B1;">
											<td><input type="checkbox" name="selectID" /></td>
											<td th:idd="${row.id}" th:text="${rowStat.index}+1">1</td>
											<td th:text="${row.RealName}">阿里巴巴</td>
											<td th:text="${row.TeacherId}">阿里巴巴</td>
											<td th:text="未设置">阿里巴巴</td>
											<td th:text="未设置">阿里巴巴</td>
										</tr>
										<tr th:each="row : ${TCList}">
											<td><input type="checkbox" name="selectID" /></td>
											<td th:idd="${row.id}" th:text="${rowStat.index}+1">1</td>
											<td th:text="${row.RealName}">阿里巴巴</td>
											<td th:idd="${row.teacher_id}" th:text="${row.TeacherId}">阿里巴巴</td>
											<td th:text="${row.CourseName}">阿里巴巴</td>
											<td th:idd="${row.course_id}" th:text="${row.CourseId}">阿里巴巴</td>
										</tr>
									</tbody>
								</table>
								<!-- 								<div class="nothing">
					  									没有查询到有用数据
					  								</div> -->
								<div class="layui-row">
									<div class="layui-btn-group layui-col-md-offset9">
										<button type="button" class="layui-btn" onclick="M.saveTeachCourse(this)">授课</button>
										<button type="button" class="layui-btn" onclick="">搜索</button>
									</div>
								</div>
							</div>
							<div class="layui-tab-item" id="TccTable">
								<table class="layui-table">
									<colgroup>
										<col>
									</colgroup>
									<thead>
										<tr>
											<th><input type="checkbox" onclick="M.SelectAll(this)" /></th>
											<th>序号</th>
											<th>班级</th>
											<th>辅导员</th>
											<th>工号</th>
											<th>学院</th>
											<th>排课详情</th>
										</tr>
									</thead>
									<tbody>
										<tr th:each="row : ${ClazzListF}" style="background-color: #92B8B1;">
											<td><input type="checkbox" name="selectID" /></td>
											<td th:idd="${row.id}" th:text="${rowStat.index}+1">1</td>
											<td th:text="${row.ClazzId}">阿里巴巴</td>
											<td>阿里巴巴</td>
											<td th:text="${row.Instructor}">阿里巴巴</td>
											<td th:text="${row.AcademyName}">阿里巴巴</td>
											<td th:isCourse="${row.isCourse}">未排课</td>
										</tr>
										<tr th:each="row : ${ClazzListT}">
											<td><input type="checkbox" name="selectID" /></td>
											<td th:idd="${row.id}" th:text="${rowStat.index}+1">1</td>
											<td th:text="${row.ClazzId}">阿里巴巴</td>
											<td th:text="${row.RealName}">阿里巴巴</td>
											<td th:text="${row.Instructor}">阿里巴巴</td>
											<td th:text="${row.AcademyName}">阿里巴巴</td>
											<td th:isCourse="${row.isCourse}" onclick="M.openTimetable(this)">详情</td>
										</tr>
									</tbody>
								</table>
								<!-- 								<div class="nothing">
														没有查询到有用数据
													</div> -->
								<div class="layui-row">
									<div class="layui-btn-group layui-col-md-offset9">
										<button type="button" class="layui-btn" onclick="openClazzCourse(this)">排课</button>
										<button type="button" class="layui-btn" onclick="">搜索</button>
									</div>
								</div>
							</div>
						</div>
				</fieldset>
				</fieldset>
			</div>

		</div>
	</body>
	<!-- 初始化点击事件 -->
	<script th:replace =" ~{A_Common::Init_Click}"></script>
	<script th:inline="javascript">
		
		// var M = {};
		var CTCList = [[${CTCList}]];
		var sdsd = [[${ClazzListF}]];
			// layui.use('form', function(){
			// 	var form = layui.form;
			// 	form.on('select(test)', function(data){
			// 	  // 根据输入的课程来查找对应的老师
			// 	  	// alert(data.value);
			// 	  if(data.value != ""){
			// 		  for(let i=0;i<CTCList.length;i++){
			// 		  	if(str == CTCList[i].CourseId){
			// 		  		let terStr = "<option>"+CTCList[i].RealName+'['+CTCList[i].TeacherId+']'+"</option>";
			// 		  		$(".teacher").attr("idd",CTCList[i].id);
			// 		  		$(".teacher").append(terStr);
			// 		  	}
			// 		  }
			// 	  }
			// 	});
			// });
		
		function openTeachCourse(data){
					
			var dlgContent = $('.course_dlg_define').html(); // 窗口内容
			
			layer.open({
				type: 1,
				title: '添加记录', 
				area: ['420px', 'auto'], 
				content: dlgContent,
				btn:['确定','放弃'] ,
				
				btn1: function(index,layero){
					let req = {};
					req.ids = data;
					req.course_id =Number($(".pane select option:selected",layero).val().trim());
					
					Af.rest([[@{course_saveTeachCourse.do}]],req,function(data){
						layer.open({
							title: "信息",
							content: '成功！',
							offset: 't',
							time: 500,
							success: function(layero, index){
								setTimeout(function(){location.reload();},600);
							  }
						});
					});
					// 关闭对话框
					layer.close(index)	;				
				},
				btn2 : function(index,layero){
					layer.close(index)		
				}
			});	
			
		}
		
		//班级排课
		function openClazzCourse(e){
			
			let table = $(e).parent().parent().prev();
			let trs = $(table).find("tbody tr");
			let checkeds = $($(table).find("tbody tr td input[name='selectID']:checked"));
			if(checkeds.length == 0){
				layer.open({
					title: "信息",
					content: '请选择需要排课的班级！',
					offset: 't',
					time: 2000
				});
				return;
			}
			
			
			layui.use('form', function(){
			    var form = layui.form;
				var dlgContent = $('.clazz_course_dlg_define').html(); // 窗口内容
				
				layer.open({
					type: 1,
					title: '添加记录', 
					area: ['600px', '400px'], 
					content: dlgContent,
					btn:['确定','放弃'] ,
					 success: function(index, layero){
						 // 重新渲染弹层中的下拉选择框select
						form.render('select');
					 },
					 
					btn1: function(index,layero){
						// 获取课教中间表的id
						let trs = $(".pane table tbody tr",layero);
						let array = new Array();
						for(let i =0;i<trs.length;i++){
							let ter_crs_id = $(trs.get(i)).attr("idd");
							
							if(typeof(ter_crs_id)!="undefined")
								array.push(ter_crs_id);
						}
						
						//获取班级表的id
						let reqs = new Array();
						for(let i =0;i<checkeds.length;i++){
							let req = {};
							req.clazz_id = $($(checkeds.get(i)).parent()).next().attr("idd");
							req.isCourse = $($(checkeds.get(i)).parent()).next().next().next().next().next().next().attr("isCourse");
							req.ter_crs_ids = array;
							reqs.push(req);
						}
						
						if(reqs.length != 0){
							Af.rest([[@{course_saveClazzCourse.do}]],reqs,function(data){
								layer.open({
									title: "信息",
									content: '成功！',
									offset: 't',
									time: 500,
									success: function(layero, index){
										setTimeout(function(){location.reload();},600);
									  }
								});
							});
						}else{
							layer.open({
								title: "信息",
								content: '请选择课程！',
								offset: 't',
								time: 2000
							});
						}
						
						// 关闭对话框
						layer.close(index)	;				
					},
					btn2 : function(index,layero){
						layer.close(index)		
					}
				});
				form.on('select(test)', function(data){
				  // 根据输入的课程来查找对应的老师
					// alert(data.value);
					// console.log(data.elem);
					// console.log(data.value);
					$(data.elem).parent().next().find(".teacher").empty();
				  if(data.value != ""){
					  for(let i=0;i<CTCList.length;i++){
						if(data.value == CTCList[i].course_id){
							$(data.elem).parent().parent().attr("idd",CTCList[i].id);
							 $(data.elem).parent().next().find(".teacher")
							 .append(new Option(CTCList[i].RealName+'['+CTCList[i].TeacherId+']'));// 下拉菜单里添加元素 
						}
					  }
				  }
				  
				  form.render(); 
				});
			});		
			
		}
		
		
		
		// 保存课程
		M.saveCourse = function(){
			var req = {};
			req.CourseName = $($(".layui-input").get(0)).val().trim();
			req.CourseId = $($(".layui-input").get(1)).val().trim();
			
			if(req.CourseName.length != 0  && req.CourseId.length != 0)
			Af.rest([[@{course_saveCourse.do}]],req,function(data){
				layer.open({
					title: "信息",
					content: '成功！',
					offset: 't',
					time: 500,
					success: function(layero, index){
						setTimeout(function(){location.reload();},600);
					  }
				});
			});
		}
		
		//保存老师的排课信息
		M.saveTeachCourse = function(e){
			let tables = $($(e).parent().parent()).prev();
			let checkeds = $($(tables).find("tbody tr td input[name='selectID']:checked"));
			if (checkeds.length > 0) {
				let datas = new Array();
				for (let i = 0; i < checkeds.length; i++) {
					let s = $($(checkeds.get(i)).parent()).next().attr("idd");
					datas.push(Number(s));
				}
				openTeachCourse(datas);
			}else{
				layer.open({
					title: "信息",
					content: '请选择需要修改的数据！',
					offset: 't',
					time: 2000
				});
			}
		}
		
		// 删除一条记录
		M.DeleteModel = function(e){
			let tables = $($(e).parent().parent()).prev();
			let checkeds = $($(tables).find("tbody tr td input[name='selectID']:checked"));
			if (checkeds.length > 0) {
				let datas = new Array();
				for (let i = 0; i < checkeds.length; i++) {
					let s = $($(checkeds.get(i)).parent()).next().attr("idd");
					
					datas.push(Number(s));
				}
				
				Af.rest([[@{course_deleteCourse.do}]],datas,function(data){
					layer.open({
						title: "信息",
						content: '成功！',
						offset: 't',
						time: 500,
						success: function(layero, index){
							setTimeout(function(){location.reload();},600);
						  }
					});
				});
				
			}
		}
		
		//修改课程
		var count = 0;
		M.OpenUpdate = function(e) {
		
			let tables = $($(e).parent().parent()).prev();
			let id = $($(e).parent().parent().parent()).attr("id");
			let checkeds = $($(tables).find("tbody tr td input[name='selectID']:checked"));
			count = checkeds.length;
			if (checkeds.length > 0) {
				$(checkeds.parent().parent()).css("background-color","khaki");
				$($(checkeds).parent().parent()).attr("contenteditable", true);
				let trs = $(checkeds).parent().parent();
				for (let i = 0; i < checkeds.length; i++) {
					$($($(trs.get(i)).children()).get(0)).attr("contenteditable", false);
					$($($(trs.get(i)).children()).get(1)).attr("contenteditable", false);
				}
			}else{
				layer.open({
					title: "信息",
					content: '请选择需要修改的数据！',
					offset: 't',
					time: 2000
				});
			}
		}
		
		//保存修改后信息
		M.SaveUpdate = function(e) {
		
			let tables = $($(e).parent().parent()).prev();
			let trs = $(tables).find("tbody tr");
			
			let checkeds = $($(tables).find("tbody tr td input[name='selectID']:checked"));
			let datas = new Array();
			if (checkeds.length != count) {
				layer.open({
					title: "信息",
					content: '请检查修改的数据数量！',
					offset: 't',
					time: 2000
				});
			} else {
				// let tableId = $($(e).parent().parent().parent()).attr("id");
				// if(tableId == "courseTable"){
					for (let i = 0; i < checkeds.length; i++) {
						var req = {};
						req.id = Number($($($($(checkeds[i]).parent().parent()).children()).get(1)).attr("idd"));
						req.CourseName = $($($($(checkeds[i]).parent().parent()).children()).get(2)).text().trim();
						req.CourseId = $($($($(checkeds[i]).parent().parent()).children()).get(3)).text().trim();
						datas.push(req);
						}
						Af.rest([[@{course_saveUpdateCourse.do}]], datas, function(data) {
							layer.open({
								title: "信息",
								content: '成功！',
								offset: 't',
								time: 500,
								success: function(layero, index){
									setTimeout(function(){location.reload();},600);
								  }
							});
						});
					}
			}
			
			//课表详情
			M.openTimetable = function(e){
				
				let clazz_id = $(e).prev().prev().prev().prev().prev().attr("idd");
				Af.rest([[@{course_selectTimetable.do}]], clazz_id, function(data) {
					console.log(data);
					layui.use('form', function(){
					    var form = layui.form;
						var dlgContent = $('.timetable_dlg_define').html(); // 窗口内容
						
						layer.open({
							type: 1,
							title: '添加记录', 
							area: ['600px', '400px'], 
							content: dlgContent,
							btn:['确定','放弃'] ,
							 success: function(layero,index){
								 // 重新渲染弹层中的下拉选择框select//设置显示已有的课程
								let Course =  $(".pane table tbody tr td .course",layero);
								let Teacher =  $(".pane table tbody tr td .teacher",layero);
								
								for(let i=0;i<data.length;i++){
									$(Course).eq(i).val(data[i].course_id);
									for(let j=0;j<CTCList.length;j++){
										if(data[i].course_id == CTCList[j].course_id){
											$(Teacher).eq(i).append(new Option(CTCList[j]
											.RealName+'['+CTCList[j].TeacherId+']',CTCList[j].teacher_id));// 下拉菜单里添加元素 
										}
									}
									$(Teacher).eq(i).parent().parent().attr("idd",CTCList[i].id);
									$(Teacher).eq(i).parent().parent().attr("cdd",data[i].id);
									$(Teacher).eq(i).val(data[i].teacher_id);
								}
								form.render('select');
							 },
							 
							btn1: function(index,layero){
								let trs = $(".pane table tbody tr",layero);
								let array = new Array();
								for(let i =0;i<trs.length;i++){
									let req = {};
									req.id = $(trs.get(i)).attr("cdd");
									req.ter_crs_id = $(trs.get(i)).attr("idd");
									
									if(typeof(req.ter_crs_id)!="undefined")
										array.push(req);
								}
								
								
								if(array.length != 0){
									Af.rest([[@{course_saveUpdateTimetable.do}]],array,function(data){
										layer.open({
											title: "信息",
											content: '成功！',
											offset: 't',
											time: 500,
											success: function(layero, index){
												setTimeout(function(){location.reload();},600);
											  }
										});
									});
									// 关闭对话框
									layer.close(index)	;
								}else{
									layer.confirm('是否确定删除这个课表',{
										btn:['接受', '拒绝'],
										yes:function(index2){
											
											Af.rest([[@{course_deleteTimetable.do}]],clazz_id,function(data){
												layer.open({
													title: "信息",
													content: '成功！',
													offset: 't',
													time: 500,
													success: function(layero, index){
														setTimeout(function(){location.reload();},600);
													  }
												});
											});
											
											layer.close(index2);
											layer.close(index);
										},
										no:function(index2){
											
										}
									});
									// // 关闭对话框
									// layer.close(index);
								}				
							},
							btn2 : function(index,layero){
								layer.close(index)		
							}
						});
						form.on('select(test)', function(data){
						  // 根据输入的课程来查找对应的老师
							// alert(data.value);
							$(data.elem).parent().next().find(".teacher").empty();
						  if(data.value != ""){
							  for(let i=0;i<CTCList.length;i++){
								if(data.value == CTCList[i].course_id){
									$(data.elem).parent().parent().attr("idd",CTCList[i].id);
									 $(data.elem).parent().next().find(".teacher")
									 .append(new Option(CTCList[i].RealName+'['+CTCList[i].TeacherId+']'));// 下拉菜单里添加元素 
								}
							  }
						  }else{
							$(data.elem).parent().parent().removeAttr("idd");  
						  }
						  form.render(); 
						});
					});	
				});
			}
			
			var page = sessionStorage.getItem("page");
			M.init = function(){
				$(tab_titles).removeAttr("class");
				$(tab_contents).hide();
				if(Number(page) >= 0){
					$(tab_titles).removeAttr("class");
					$(tab_contents).hide();
					
					switch(Number(page)){
						case 0:
							sessionStorage.setItem("page",0);
							$(".layui-tab-title li:eq(0)").attr("class","layui-this");
							$(".layui-tab-content .layui-tab-item:eq(0)").show();
						break;
						case 1:
							sessionStorage.setItem("page",1);
							var s = $(".layui-tab-title li:eq(1)").attr("class","layui-this");
							var m = $(".layui-tab-content .layui-tab-item:eq(1)").show();
						break;
						case 2:
							sessionStorage.setItem("page",2);
							$(".layui-tab-title li:eq(2)").attr("class","layui-this");
							$(".layui-tab-content .layui-tab-item:eq(2)").show();
						break;
						case 3:
							sessionStorage.setItem("page",3);
							$(".layui-tab-title li:eq(3)").attr("class","layui-this");
							$(".layui-tab-content .layui-tab-item:eq(3)").show();
						break;
						default: 
						       sessionStorage.setItem("page",0);
						       $(".layui-tab-title li:eq(0)").attr("class","layui-this");
						       $(".layui-tab-content .layui-tab-item:eq(0)").show();
						break;
					}	
				}else{
					sessionStorage.setItem("page",0);
					$(".layui-tab-title li:eq(0)").attr("class","layui-this");
					$(".layui-tab-content .layui-tab-item:eq(0)").show();
					}
				}();
	</script>

	
	
	
	
</html>
